<template>
    <div class="hospital-list">
        <h2 class="title">{{ $route.meta.title }}<span>医师人员总数：{{ total }}</span></h2>
        <el-input
            class="search-input"
            placeholder="请输入医师姓名搜索..."
            prefix-icon="el-icon-search"
            v-model="keyword">
        </el-input>
        <div class="table">
            <el-table
                :data="tableData"
                border
                fit
                style="width: 100%"
                header-cell-class-name="table-header-cell"
                :class="tableData.length === 0 ? 'table-empty' : ''"
            >
                <el-table-column
                    v-for="item in tableConfig"
                    :key="item.prop"
                    :prop="item.prop"
                    :label="item.label"
                >
                </el-table-column>
                <el-table-column label="操作" width="300">
                    <template slot-scope="scope">
                        <div class="operation">
                            <div >查看</div>
                            <div  style="margin-left: 20%;" @click="handleEdit(scope)">编辑</div>
                            <div class="delete">删除</div>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-pagination
            background
            layout="prev, pager, next"
            :total="1000">
        </el-pagination>
        <el-dialog
            v-if="editDialogVisible"
            title="编辑信息"
            :visible.sync="editDialogVisible"
            width="30%"
            :before-close="handleClose"
            class="edit-dialog"
            top="40vh"
        >
            <div class="edit-box">
                <div class="name">医生姓名<el-input v-model="editData.name"></el-input></div>
                <div class="id-number">身份证号<el-input v-model="editData.idNumber"></el-input></div>
                <div class="submit">确认修改</div>
            </div>
        </el-dialog>
    </div>
</template>
<script>

export default {
    name: 'HospitalList',
    data() {
        return {
            total: 25689,
            keyword:'',
            editDialogVisible: false,
            editData: null,
            tableConfig: [
                {
                    prop: 'order',
                    label: '序号',
                },
                {
                    prop: 'name',
                    label: '医院名称',
                },
                {
                    prop: 'type',
                    label: '医师类别',
                },
                {
                    prop: 'qualification',
                    label: '任职资格',
                },
                {
                    prop: 'practiceScope',
                    label: '执业范围',
                },
                {
                    prop: 'organization',
                    label: '主要执业机构',
                },
                {
                    prop: 'region',
                    label: '辖区',
                },
                {
                    prop: 'prescriptionRight',
                    label: '处方权',
                },
            ],
            tableData: [
                {
                    order: '01',
                    name: '李雷',
                    type: '临床',
                    qualification: '主治医生',
                    practiceScope: '儿科专业',
                    organization: '医科大医院',
                    region: '板桥镇',
                    prescriptionRight: '1种',
                },
                {
                    order: '01',
                    name: '李雷',
                    type: '临床',
                    qualification: '主治医生',
                    practiceScope: '儿科专业',
                    organization: '医科大医院',
                    region: '板桥镇',
                    prescriptionRight: '1种',
                }
            ]
        }
    },
    watch: {
        total: {
            immediate: true,
            handler(val){
                this.setTotal(val)
            }
        }
    },
    methods: {
        handleEdit(scope) {
            this.editData = scope.row
            this.editDialogVisible = true
        },
        handleClose() {
            this.editDialogVisible = false
            this.editData = null
        },
        setTotal(value){
            const resolveRoute = (this.$router.resolve({
                path: this.$route.path,
                query: {...this.$route.query, total: value}
            }))
            if(location.href.includes(resolveRoute.href)) return
            this.$router.replace({
                path: this.$route.path,
                query: {...this.$route.query, total: value}
            })
        }
    }
}
</script>
<style scoped lang="scss">
.hospital-list {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.title {
    font-size: 26px;
    color: #4B4B4B;
    font-weight: bold;
    margin: 18px 0 24px;

    span {
        font-weight: 500;
        font-size: 18px;
        color: #4B4B4B;
        margin-left: 16px;
    }
}
.search-input {
    width: 264px;
    height: 47px;
    background: #FFFFFF;
    border-radius: 5px;

    ::v-deep input {
        line-height: 45px;
        height: 47px;
        display: inline-block;
    }

    ::v-deep .el-input__icon {
        line-height: 45px;
        height: 45px;
        vertical-align: -0.15em;
        color: #4373F1;
    }
}

.table {
    flex: 1;
    background-color: #fff;
    margin: 13px 0 16px;

    ::v-deep .table-header-cell {
        background-color: #EBEFF8;
        padding-left: 21px;
        font-weight: 500;
        font-size: 16px;
        color: #414141;
    }
    .el-table {
        height: 100%;
    }
    ::v-deep .el-table__cell {
        padding-left: 21px;
        font-weight: 500;
        font-size: 16px;
        color: #414141;
    }
    :v-deep .el-table__body-wrapper {
        height: 100%;
    }
    :v-deep .el-table__empty-block {
        height: 100%;
    }
    .operation {
        display: flex;
        align-items: center;
        height: 100%;

        .view, .edit, .delete {
            cursor: pointer;
            font-weight: 500;
            font-size: 16px;
            color: #414141;
            height: 16px;
            line-height: 16px;
            padding-left: 20px;
            background-repeat: no-repeat;
            background-position: 0 center;
            margin-right: 20px;
            user-select: none;
        }

        .view {
            background-image: url('~@/assets/images/table/view.png');
        }
        .edit {
            background-image: url('~@/assets/images/table/edit.png');
        }
        .delete {
            background-image: url('~@/assets/images/table/delete.png');
            margin-right: 0;
        }
    }
}

.edit-box {
    display: flex;
    flex-direction: column;
    align-items: center;

    ::v-deep .el-dialog__footer {
        display: none;
    }

    .submit {
        width: 164px;
        height: 56px;
        background: #4373F1;
        border-radius: 5px;
        user-select: none;
        line-height: 56px;
        color: #fff;
        text-align: center;
        margin-top: 22px;
        cursor: pointer;
    }
    .name {
        margin-bottom: 13px;
    }

    .name, .id-number {
        display: flex;
        align-items: center;
        white-space: nowrap;
        width: 410px;
        height: 56px;
        line-height: 16px;
        background: rgba(238,238,238,0.38);
        border-radius: 5px;
        border: 1px solid #E5E5E5;
        font-weight: bold;
        font-size: 16px;
        color: #505050;
        padding: 20px 22px;

        ::v-deep input {
            border: none;
            background: rgba(238,238,238,0.38);
        }
    }
}
::v-deep .el-dialog:not(.is-fullscreen) {
    margin-top: 40vh !important;
}
</style>
